<template>
	<view class="listContainer">
		<u-list @scrolltolower='scrolltolower'>
			<slot name='topSlot' />
			<view :style="{ marginBottom:index === listData.length - 1 ? '0px' : marginBottom }"
				v-show="listData.length > 0" class="listPanel" v-for="(item,index) in listData" :key="index">
				<slot :data="{index,item,list:listData}" />
			</view>
			<div class="info" ref="info" @click='infoClick'>
				<u-loading-icon v-if="loading" text="加载中" size='12' textSize="12"></u-loading-icon>
				<view class="infoText" v-else>{{ infoText }}</view>
			</div>
		</u-list>
	</view>
</template>

<script>
	export default {
		name: "list",
		props: {
			marginBottom: {
				type: String,
				default: () => '12px'
			},
			// 请求api
			requestApi: {
				type: Function,
				default: () => {
					return () => {}
				}
			},
			// 请求参数
			beforeRequest: {
				type: Function,
				default: () => {
					return () => {}
				}
			},
			// 返回参数 需return { list:[], total: 0 }  
			responeseHandle: {
				type: Function,
				default: () => {
					return () => {}
				}
			},
			// // 加载完毕文案
			// finishedText: {
			// 	type: String,
			// 	default: () => '没有更多了'
			// },
			// 是否自动请求
			// autoRequest: {
			// 	type: Boolean,
			// 	default: () => true
			// }

		},
		data() {
			return {
				loading: false, // 加载状态
				error: false, // 是否加载失败
				finished: false, // 是否加载完毕
				listData: [], // 列表数据
				total: 0, // 总数
				pageSize: 10, // 页面大小
				currentPage: 1 // 当前页面
			}
		},
		computed: {
			infoText() {
				const {
					error,
					loading,
					finished
				} = this
				if (error) {
					return '加载失败，点击重试'
				}
				if (finished) {
					return '没有更多了'
				}
				return ''
			}
		},
		created() {
			this.getData()
		},
		mounted() {
			const info = this.$refs.info
			console.log();
		},
		methods: {
			// 获取数据
			async getData(start, cb) {
				this.loading = true
				this.error = false
				const data = {
					...this.beforeRequest({
						pageSize: this.pageSize,
						currentPage: this.currentPage
					})
				}
				try {
					const res = await this.requestApi(data)
					this.loading = false
					this.showList = true
					if (cb) {
						cb(res.success)
					}
					if (!res.success) {
						this.error = true
						return
					}
					if (start) {
						this.listData = []
					}
					this.currentPage++
					const result = this.responeseHandle(res)

					if (result.total - 0 === 0) {
						this.isEmpty = true
					}
					this.listData.push(...result.list)
					this.total = result.total

					if (this.listData.length >= this.total) {
						this.finished = true
					}
				} catch (e) {
					this.loading = false
					this.error = true
					this.finished = false
				}

			},
			// 下拉刷新
			onRefresh() {
				this.loading = true
				this.currentPage = 1
				this.total = 0
				this.finished = false
				this.error = false
				this.getData([], (res) => {
					uni.showToast({
						icon: res,
						title: res ? "刷新成功" : '刷新失败',
						duration: 500
					})
					uni.stopPullDownRefresh()
				})
			},
			// 触底
			scrolltolower() {
				console.log('触底');
				if (this.error) {
					return
				}
				if (this.finished) {
					return
				}
				this.getData()
			},
			// 列表下方点击文案
			infoClick() {
				if (this.finished) {
					return
				}
				this.getData()
			}
		}

	}
</script>

<style scoped lang="scss">
	.listContainer {
		width: 100%;
		height: 100%;
		overflow: auto;

		.info {
			padding: 12px 0;
			height: 46px;
			display: flex;
			align-items: center;
			justify-content: center;

			.infoText {
				text-align: center;
			}
		}
	}
</style>
